Web Development Asynchronous ডেটা লোড এবং Error Handling গাইড ও নোট

Redux-এ সাধারণত সিনক্রোনাস (synchronous) একশন ব্যবহৃত হয়, কিন্তু অ্যাসিনক্রোনাস (asynchronous) কাজ, যেমন API কল, ডেটাবেস সংযোগ, বা লম্বা সময় নেওয়া প্রসেস পরিচালনা করার জন্য কিছু অতিরিক্ত কৌশল প্রয়োজন। Redux নিজে অ্যাসিনক্রোনাস কাজের জন্য কোনও বিল্ট-ইন মেকানিজম প্রদান করে না, তবে middleware যেমন Redux Thunk, Redux Saga, অথবা Redux Toolkit এর মাধ্যমে অ্যাসিনক্রোনাস কাজ সহজভাবে পরিচালনা করা যায়।

এছাড়া, অ্যাসিনক্রোনাস কাজের সময় Error Handling (ত্রুটি পরিচালনা) গুরুত্বপূর্ণ, যাতে ব্যবহারকারীরা ত্রুটি সম্পর্কিত সঠিক তথ্য পায় এবং অ্যাপ্লিকেশনটি স্থিতিশীল থাকে।

অ্যাসিনক্রোনাস ডেটা লোড

Redux-এ অ্যাসিনক্রোনাস ডেটা লোড করার জন্য সবচেয়ে সাধারণভাবে ব্যবহৃত Redux Thunk middleware। Thunk হলো একটি ফাংশন যা স্টোর ডিসপ্যাচ করতে পারে এবং যেকোনো অ্যাসিনক্রোনাস কোড পরিচালনা করতে পারে। এখানে অ্যাসিনক্রোনাস ডেটা লোড করার একটি সাধারণ উদাহরণ দেওয়া হলো।

১. Redux Thunk দিয়ে অ্যাসিনক্রোনাস ডেটা লোড

Redux Thunk হলো একটি মiddleware, যা অ্যাসিনক্রোনাস একশন ক্রিয়েটর (action creators) তৈরি করতে সাহায্য করে। অ্যাসিনক্রোনাস কাজের জন্য আপনি Thunk ফাংশন ব্যবহার করতে পারেন, যা অ্যাসিনক্রোনাস কাজ সম্পন্ন হওয়ার পর একশন ডিসপ্যাচ করে।

উদাহরণ:

ধরা যাক, একটি API থেকে টুডু আইটেম লোড করতে হবে।

// Action Types
const FETCH_TODOS_REQUEST = 'FETCH_TODOS_REQUEST';
const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS';
const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

// Action Creators
const fetchTodosRequest = () => ({
  type: FETCH_TODOS_REQUEST
});

const fetchTodosSuccess = (todos) => ({
  type: FETCH_TODOS_SUCCESS,
  payload: todos
});

const fetchTodosFailure = (error) => ({
  type: FETCH_TODOS_FAILURE,
  payload: error
});

// Asynchronous Action Creator using Thunk
const fetchTodos = () => {
  return (dispatch) => {
    dispatch(fetchTodosRequest()); // Request শুরু
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json())
      .then(todos => {
        dispatch(fetchTodosSuccess(todos)); // ডেটা সফলভাবে লোড হলে
      })
      .catch(error => {
        dispatch(fetchTodosFailure(error.message)); // ত্রুটি হলে
      });
  };
};

এখানে:

• fetchTodos ফাংশনটি একটি অ্যাসিনক্রোনাস একশন ক্রিয়েটর, যা API থেকে ডেটা লোড করতে থাঙ্ক ব্যবহার করে।
• প্রথমে fetchTodosRequest ডিসপ্যাচ করা হয়, যার মাধ্যমে রিকোয়েস্ট শুরু হয়েছে এমন সংকেত দেওয়া হয়।
• API কল সফল হলে fetchTodosSuccess ডিসপ্যাচ হয় এবং টুডো ডেটা লোড হয়।
• যদি কোনো ত্রুটি হয়, তবে fetchTodosFailure ডিসপ্যাচ হয়, এবং ত্রুটির বার্তা পাঠানো হয়।

২. Redux Store এবং Reducer

Redux স্টোরে স্টেট পরিবর্তন করার জন্য, রিডিউসার ব্যবহার করা হয়। এখানে একটি রিডিউসার রয়েছে যা অ্যাসিনক্রোনাস ডেটা লোডের স্টেটের পরিবর্তনগুলি পরিচালনা করে।

const initialState = {
  loading: false,
  todos: [],
  error: ''
};

function todosReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_TODOS_REQUEST:
      return {
        ...state,
        loading: true
      };
    case FETCH_TODOS_SUCCESS:
      return {
        ...state,
        loading: false,
        todos: action.payload
      };
    case FETCH_TODOS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
}

এখানে:

• FETCH_TODOS_REQUEST একশনের মাধ্যমে loading স্টেটকে true করা হয়, যা UI-তে লোডিং স্পিনার দেখাতে সাহায্য করে।
• FETCH_TODOS_SUCCESS একশনের মাধ্যমে ডেটা লোড হয়ে গেলে loading false করা হয় এবং টুডু আইটেমগুলি স্টেটে রাখা হয়।
• FETCH_TODOS_FAILURE একশনের মাধ্যমে কোনো ত্রুটি ঘটলে error স্টেট আপডেট হয়।

৩. UI এ অ্যাসিনক্রোনাস স্টেট এবং Error Handling

এখন UI-তে অ্যাসিনক্রোনাস স্টেট এবং ত্রুটি প্রদর্শন করা হবে। উদাহরণস্বরূপ, আমরা লোডিং স্টেট এবং ত্রুটি বার্তা দেখাতে পারি।

function TodoList() {
  const dispatch = useDispatch();
  const todos = useSelector(state => state.todos);
  const loading = useSelector(state => state.loading);
  const error = useSelector(state => state.error);

  useEffect(() => {
    dispatch(fetchTodos()); // অ্যাসিনক্রোনাস ডেটা লোডিং শুরু
  }, [dispatch]);

  if (loading) {
    return <div>Loading...</div>; // লোডিং হলে
  }

  if (error) {
    return <div>Error: {error}</div>; // ত্রুটি হলে
  }

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

এখানে:

• useSelector ব্যবহার করে অ্যাপ্লিকেশনের স্টেট থেকে todos, loading, এবং error তথ্য নেওয়া হচ্ছে।
• useEffect হুক ব্যবহার করে, কম্পোনেন্ট লোড হলে fetchTodos() একশন ডিসপ্যাচ করা হচ্ছে।
• যদি ডেটা লোড হচ্ছে, তবে "Loading..." বার্তা দেখানো হচ্ছে।
• যদি কোনো ত্রুটি ঘটে, তবে ত্রুটির বার্তা প্রদর্শিত হচ্ছে।

৪. Redux Toolkit ব্যবহার করে অ্যাসিনক্রোনাস ডেটা লোড এবং Error Handling

Redux Toolkit, যেটি Redux-এর জন্য আধুনিক এবং সহজ উপায় প্রদান করে, সেখানে createAsyncThunk নামের একটি বিল্ট-ইন ফাংশন রয়েছে, যা অ্যাসিনক্রোনাস কাজের জন্য ব্যবহৃত হয়।

উদাহরণ:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch todos
export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  return response.json();
});

// Slice
const todosSlice = createSlice({
  name: 'todos',
  initialState: {
    todos: [],
    loading: false,
    error: ''
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.loading = false;
        state.todos = action.payload;
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

export default todosSlice.reducer;

এখানে:

• createAsyncThunk ব্যবহার করা হয়েছে যা অ্যাসিনক্রোনাস API কলকে সহজ করে দেয়।
• extraReducers এর মাধ্যমে অ্যাসিনক্রোনাস ডেটা লোডের তিনটি ধাপ (pending, fulfilled, rejected) হ্যান্ডেল করা হচ্ছে।

সারাংশ

Redux-এ অ্যাসিনক্রোনাস ডেটা লোড এবং ত্রুটি হ্যান্ডলিং করার জন্য:

1. Redux Thunk ব্যবহৃত হয়, যা অ্যাসিনক্রোনাস একশন ক্রিয়েটর তৈরি করতে সাহায্য করে।
2. অ্যাসিনক্রোনাস কাজের সময় স্টেট পরিবর্তন এবং ত্রুটি হ্যান্ডলিং pending, fulfilled, এবং rejected অ্যাকশন দ্বারা পরিচালনা করা হয়।
3. Redux Toolkit এর createAsyncThunk ব্যবহার করে কোডটি আরও সহজ এবং পরিস্কার করা যায়।

এভাবে, অ্যাসিনক্রোনাস কাজগুলি Redux-এর মাধ্যমে সহজে হ্যান্ডেল করা যায় এবং ত্রুটির সময় ব্যবহারকারীকে যথাযথ তথ্য প্রদান করা সম্ভব হয়।